import { Descriptions, Tag, Button, Table, Image, message, Spin, Pagination, Modal } from 'antd';
import "../../css/detail.css"
import { useEffect, useState } from 'react';
import { GetSupplierStatistics, GetSupplierOrderDetails, GetSupplierGoods, BanGoods, ShelveGoods, GetOrderDetails } from '../../api/supplier';
import { useLocation } from 'react-router-dom';
import React from "react";
import { useNavigate } from 'react-router-dom';
const Detail = () => {
    const [detail, setDetail] = useState([]);
    const [order, setOrder] = useState([]);
    const [goods, setGoods] = useState([]);
    const [spinning, setSpinning] = React.useState(false);//加载中
    const [currentPage, setCurrentPage] = useState(1);//当前页
    const [total, setTotal] = useState(0); // 定义total变量
    const location = useLocation();
    const PAGE_SIZE = 5;// 设置每页显示的数据条数
    const data = async () => {
        setSpinning(true);
        await GetSupplierStatistics({
            id: location.pathname.slice(17),
        }).then((res) => {
            if (res.result === 0) {
                setSpinning(false);
                setDetail(res.data);
            }
        });

    };

    const goodss = async () => {
        await GetSupplierGoods({
            id: location.pathname.slice(17),
        }).then((res) => {
            if (res.result === 0) {
                setGoods(res.data.data);
            }
        })
    };

    useEffect(() => {
        const order = async () => {
            await GetSupplierOrderDetails({
                id: location.pathname.slice(17),
                page: currentPage,
                limit: PAGE_SIZE,
            }).then((res) => {
                if (res.result === 0) {
                    setOrder(res.data.data);
                    setTotal(res.data.total);
                }
            })
        }
       
        data();
        order();
        goodss();
    }, [currentPage])
    const handlePageChange = (page) => {
        setCurrentPage(page);
    };


    const items = [
        {
            label: '企业名称',
            children: <Tag color='blue'>{detail.enterpriseName}</Tag>,
        },
        {
            label: '负责人',
            children: <Tag color='blue'>{detail.name}</Tag>,
        },

        {

            label: '账号',
            children: <Tag color='blue'>{detail.account}</Tag>,
        },
        {

            label: '添加时间',
            children: <Tag color='blue'>{detail.time}</Tag>,
        },


        {

            label: '激活',
            children: <Tag color={detail.isActive === 1 ? 'success' : 'warning'}>{detail.isActive === 1 ? "是" : "否"}</Tag>,
        },
        {

            label: '禁用',
            children: <Tag color={detail.isBan === 1 ? 'red' : 'success'}>{detail.isBan === 1 ? "是" : "否"}</Tag>,
        },
        {
            label: '订单',
            children: <Tag color='blue'>{detail.orderCount}</Tag>,
        },

        {

            label: '完成订单',
            children: <Tag color='blue'>{detail.completeOrderCount}</Tag>,
        },
        {

            label: '商品销量',
            children: <Tag color='blue'>{detail.sales}</Tag>,
        },
        {

            label: '销售金额',
            children: <Tag color='red'>￥{detail.money}</Tag>,
        },
        {

            label: '成交金额',
            children: <Tag color='red'>￥{detail.currMoney}</Tag>,
        },
        {

            label: '已发货订单',
            children: <Tag color='blue'>{detail.sendCount}</Tag>,
        },
        {

            label: '已收货订单',
            children: <Tag color='blue'>{detail.receiveCount}</Tag>,
        },
        {

            label: '商品数量',
            children: <Tag color='blue'>{detail.goodsCategory}</Tag>,
        },
        {

            label: '未上架商品',
            children: <Tag color='blue'>{detail.notShelveCount}</Tag>,
        },

        {

            label: '商品总库存',
            children: (
                <Tag color='blue'>{detail.inventory}件</Tag>
            )
        },
        {

            label: '已取消订单',
            children: <Tag color='blue'>{detail.cancelOrderCount}</Tag>,
        },
        {

            label: '取消金额',
            children: <Tag color='blue'>{detail.cancelMoney}</Tag>,
        },
        {
            label: '企业LOGO',
            children: <Image src={detail.logo} alt="封面" style={{ width: '80px', height: '80px' }} />,
        },
        {
            label: '企业图片',
            children: <Image src={detail.photo} alt="封面" style={{ width: '80px', height: '80px' }} />,
        },
        {
            label: '企业资质',
            children: <Image src={detail.qualification} alt="封面" style={{ width: '80px', height: '80px' }} />,
        }

    ]
    // 销售订单(表格)
    const orders = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`,
            width: 80
        },
        {
            title: '详情号',
            dataIndex: 'id',
            ellipsis: true,
        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            key: 'supplier',
            render: (_, record) => {
                return <Tag color='blue'>{record.supplier}</Tag>
            }

        },
        {
            title: '商户',
            dataIndex: 'merchant',
        },
        {
            title: '商品',
            dataIndex: 'goodsNames',
            ellipsis: true,
        },
        {
            title: '数量',
            dataIndex: 'goodsCount',
            width: 80
        },
        {
            title: '金额',
            dataIndex: 'money',
            render: (_, record) => {
                return <Tag color='error'>{record.money}</Tag>
            },
            width: 100
        },
        {
            title: '时间',
            dataIndex: 'time',
            ellipsis: true,
        },

        {
            title: '操作',
            dataIndex: 'address',
            width: '150px',
            fixed: "right",
        },
    ];
    //商品列表
    const Goods = [
        {
            title: "序号",
            render: (text, record, index) => `${index + 1}`,
            width: 70
        },
        {
            title: '图片',
            dataIndex: 'photo',
            render: (text) => (
                <Image
                    width={50}
                    src={text}
                />
            )
        },
        {
            title: '名称',
            dataIndex: 'name',
            ellipsis: true,
        },
        {
            title: '供应商',
            dataIndex: 'supplier',
            key: 'supplier',
            ellipsis: true,

        },
        {
            title: '单价',
            dataIndex: 'price',
            render: (_, record) => {
                return <Tag color='volcano'>{record.price}</Tag>
            },
            ellipsis: true,
        },
        {
            title: '库存总数',
            dataIndex: 'inventory',
            render: (_, record) => {
                return <Tag color='blue'>{record.inventory}</Tag>
            }
        },
        {
            title: '销量',
            dataIndex: 'sales',
            key: 'sales',
            render: (_, record) => {
                return <Tag color='blue'>{record.sales}</Tag>
            }
        },

        {
            title: '剩余库存',
            dataIndex: '',
            render: (_, { inventory, sales }, text) => {
                text = inventory - sales;
                return <Tag color='blue'>{text}</Tag>

            }
        },

        {
            title: '上架',
            dataIndex: 'isShelve',
            render: (_, record) => {
                return <Tag color={record.isShelve === 1 ? 'success' : 'warning'}>{record.isShelve === 1 ? "是" : "否"}</Tag>
            }
        },
        {
            title: '禁用',
            dataIndex: 'isBan',
            render: (_, record) => {
                return <Tag color={record.isBan === 1 ? 'volcano' : 'green'}>{record.isBan === 1 ? "是" : "否"}</Tag>
            }
        },
        {
            title: '资质文件',
            dataIndex: 'isQualifications',
            render: (_, record) => {
                return <Tag color={record.isQualifications > 0 ? 'green' : 'orange'}>{record.isQualifications}</Tag>
            }
        },
        {
            title: '操作',
            dataIndex: '',
            width: '280px',
            render: (_, record) => (
                <span>
                    <Button type="primary" ghost id='button-sj' onClick={() => details(record)}> 详情</Button>
                    <Button type="primary" ghost id='button-xq' onClick={() => zizhi(record)}>资质</Button>
                    {record.isBan === 0 && record.isShelve === 1 && (
                        <Button type="primary" id='button-xj' ghost onClick={() => shelve(record)}>下架</Button>
                    )}
                    {record.isBan === 0 && record.isShelve === 0 && (
                        <Button type="primary" id='button-sj' ghost onClick={() => shelve(record)}>上架</Button>
                    )}
                    {record.isBan === 0 && (<Button type="primary" id='button-ban' ghost onClick={() => Ban(record)}>禁用</Button>)}
                    {record.isBan === 1 && (<Button type="primary" id='button-sj' ghost onClick={() => Ban(record)}>启用</Button>)}

                </span>
            )
        },
    ];
    const navigate = useNavigate();
    const details = async (val) => {
        navigate('/goods/detail/' + val.id);
    }
    const zizhi = async (val) => {
        navigate('/goods/qualifications/' + val.id);
    }
    const Ban = async (record) => {
        setSpinning(true);
        await BanGoods({
            ids: [record.id],
            isBan: record.isBan === 1 ? 0 : 1
        }).then((res) => {
            if (res.result === 0) {
                message.success(res.message, 1.5)
                goodss();
            }
        })
        setSpinning(false);

    }
    const shelve = async (record) => {
        setSpinning(true);
        const res = await ShelveGoods({
            ids: [record.id],
            isShelve: record.isShelve === 1 ? 0 : 1
        })
        if (res.result === 0) {
            message.success(res.message, 1.5);
            goodss();
        }
        setSpinning(false);
    }

    return (
        <div className="container">
            <div className="content">
                <div>
                    <Descriptions title="供应商详情" bordered items={items} layout='vertical' className="bold-label" labelBg='rgba(0,0,0,0.88)' />
                </div>
                <div style={{ marginTop: 20, marginBottom: 10 }}>
                    <span className="Sales1">销售订单</span>
                    <div className="table" style={{ marginTop: 10 }}>
                        <Table
                            columns={orders}
                            dataSource={order}
                            bordered
                            pagination={false}
                        />
                        <Pagination current={currentPage} total={total} pageSize={PAGE_SIZE} onChange={handlePageChange} className="pagination" />
                    </div>
                </div>
                <div style={{ marginTop: 20 }}>
                    <span className="Sales2">商品列表</span>
                    <div className="table" style={{ marginTop: 10 }}>
                        <Table
                            columns={Goods}
                            dataSource={goods}
                            bordered
                            pagination={false}
                        />
                    </div>
                </div>
            </div>
            <Spin spinning={spinning} tip="Loading" fullscreen />
        </div>
    );
};
export default Detail;